<template>
	<view class="content">
		<view class="taskPage">
			<view class="tongBox">
				<view class="tongTop">
					{{txtt}}数据<text>截至{{currentTime}}</text>
				</view>
				
				<view class="tongList">
					<block v-for="(item,index) in statusList" :key="index">
						<view class="tongli" @click="changeTab(index)">
							<view class="sttTxt">
								{{item.statusName}}
							</view>
							<view class="countNumber">
								{{item.count}}
							</view>
						</view>
					</block>
				</view>
			</view>
			
			<view class="taskList">
				<view class="taskli" v-for="(item,index) in listData" :key="index">
					<view class="taskTop">
						<view class="taskTime">
							{{item.dateTxt}}<text style="padding-left:8rpx;">{{item.dateRange}}</text>
						</view>
						<view class="tastStatus" v-if="item.status == 1">
							待服务
						</view>
						<view class="tastStatus stt2" v-if="item.status == 2">
							服务中
						</view>
						<view class="tastStatus stt3" v-if="item.status == 3">
							已完成
						</view>
						<view class="tastStatus stt4" v-if="item.status == 4">
							已评价
						</view>
					</view>
					
					<view class="tastInfo">
						<view class="taskName">
							{{item.serviceType | typeFmt}} {{item.deviceName}}
						</view>
						<view class="taskTxt">
							设备名称： <text>{{item.deviceName}}</text>
						</view>
						<view class="taskTxt taskTxt2">
							服务地址： <text>{{item.contactAddress}}</text>
						</view>
						<view class="taskBtn" @click="goDetailOrder(item)">
							查看详情
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		
		<otherBottom :suo="1"></otherBottom>
		
	</view>
</template>

<script>
	import otherBottom from '@/components/otherBottom.vue';
	import { getTeacherOrder } from '@/api/login.js';
	import moment from 'moment';
	export default {
		components:{
			otherBottom
		},
		data() {
			return {
				currentTime: '',
				countPage: '',
				queryItem:{
					masterId: '',
					serviceDate: '',
					serviceType: '',
					status: '1',
					pageSize: 10,
					pageNum: 1,
				},
				txtt: '',
				statusList: [],
				listData: []
			}
		},
		filters:{
			typeFmt(val){
				if(val == 0) {
					return '安装';
				} else if(val == 1) {
					return '保养';
				} else if(val == 2) {
					return '维修';
				} else if(val == 3) {
					return '巡检';
				}
			}
		},
		onReachBottom() {
			if(this.queryItem.pageNum < this.countPage) {
				this.queryItem.pageNum ++;
				this.getList(1);
			}
		},
		onLoad(opt) {
			this.currentTime = moment().format('YYYY/MM/DD HH:mm:ss');
			if(opt.dateType == 0) {
				this.setTitie('今日','今日服务');
				this.queryItem.serviceDate = moment().format('YYYY-MM-DD');
			} else if(opt.dateType == 1){
				this.setTitie('明日','明日服务');
				this.queryItem.serviceDate = moment().add(1, 'days').format('YYYY-MM-DD');
			} else {
				this.setTitie('更多','更多服务');
				this.queryItem.serviceDate = '';
			}
			this.queryItem.masterId = uni.getStorageSync('userInfo').id;
			this.queryItem.serviceType = opt.idd;
			this.statusList = uni.getStorageSync('orderSttInfo');
			this.getList();
		},
		methods: {
			// 去详情
			goDetailOrder(val){
				if(val.serviceType == 3) {
					uni.navigateTo({
						url: '/pages/engineer/xunInfo?idd=' + val.id
					});
				} else {
					console.log(val);
					uni.navigateTo({
						url: '/pages/engineer/taskForm?idd=' + val.id
					})
				}
				
			},
			// 切换状态
			changeTab(index){
				this.queryItem.status = index + 1;
				this.getList();
			},
			// 获取列表数据
			getList(type){
				getTeacherOrder(this.queryItem).then(res=>{
					if(res.code == 200) {
						this.countPage = Math.ceil(parseInt(res.total)/parseInt(this.queryItem.pageSize));
						res.rows.forEach(item=>{
							item.dateTxt = item.appointmentTimePeriod.split(' ')[0];
							item.dateRange = item.appointmentTimePeriod.split(' ')[1];
						});
						if(type != undefined) {
							this.listData = this.listData.concat(res.rows);
						} else {
							this.listData = res.rows;
						}
					} else {
						uni.$u.toast(res.msg);
					}
				})
			},
			setTitie(type,title){
				this.txtt = type;
				uni.setNavigationBarTitle({
					title: title
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color:#3671E9;padding:32rpx 0 172rpx;
	.taskPage{
		background: #F6F6F6;box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.25);border-radius: 42rpx 42rpx 0 0;padding-bottom:20rpx;
		padding-top:34rpx;min-height:80vh;
		.tongBox{
			padding:0 32rpx;margin-bottom:40rpx;
			.tongTop{
				@include baseFont(30rpx,#333,36rpx);font-weight:500;margin-bottom:24rpx;@include flx;align-items: center;
				text{
					font-size: 24rpx;font-weight:400;color: #979797;padding-left:12rpx;line-height:36rpx;
				}
			}
			.tongList{
				@include flx;justify-content: space-between;
				.tongli{
					width: 157rpx;height: 180rpx;background: #3775FF url('../../static/shi1.png') no-repeat right bottom;
					background-size:80rpx 90rpx;border-radius: 20rpx;
					.sttTxt{
						@include baseFont(26rpx,rgba(255,255,255,0.8),32rpx);padding:24rpx 0 12rpx 22rpx;
					}
					.countNumber{
						@include baseFont(44rpx,#fff,1);margin-left:22rpx;
					}
				}
				.tongli:nth-of-type(2){
					background-image: url('../../static/shi2.png');background-size:86rpx 102rpx;
					background-color:#5FBBFB;
				}
				.tongli:nth-of-type(3){
					background-image: url('../../static/shi3.png');background-size:94rpx;background-color:#00B8D7;
				}
				.tongli:nth-of-type(4){
					background-image: url('../../static/shi4.png');background-size:92rpx;background-color:#635CDB;
				}
			}
		}
		.taskList{
			padding:0 32rpx;
			.taskli{
				background-color: #fff;border-radius:12rpx;margin-bottom:16rpx;
				.taskTop{
					@include flx;justify-content: space-between;border-bottom:2rpx solid #E7E5E5;
					padding:0 28rpx;
					.taskTime{
						@include baseFont(26rpx,#3671E9,84rpx);
						text{
							font-size:48rpx;font-weight:bold;
						}
					}
					.tastStatus{
						width:124rpx;height:48rpx;background: rgba(7, 191, 165, 0.12);border-radius:8rpx;text-align: center;
						@include baseFont(28rpx,#07BFA5,48rpx);margin-top:24rpx;
					}
					.stt2{
						background: rgba(236,153,56,0.12);color:#EC9938;
					}
					.stt3{
						background: rgba(221,71,33,0.12);color:#DD4721;
					}	
					.stt4{
						background:#837CF6;color:#837CF6;
					}
				}
				.tastInfo{
					padding:24rpx 28rpx 40rpx;
					.taskName{
						@include baseFont(32rpx,#333,44rpx);font-weight:500;margin-bottom:8rpx;
					}
					.taskTxt{
						@include baseFont(28rpx,#8D8D8D,36rpx);margin-bottom:8rpx;
						text{
							color:#333;
						}
					}
					.taskTxt2{
						margin-bottom:20rpx;
					}
					.taskBtn{
						background-color:rgba(54, 113, 233, 0.12);border: 1px solid rgba(54, 113, 233, 0.4);
						width:100%;height:60rpx;text-align: center;@include baseFont(28rpx,#3671E9,60rpx);
					}
					
				}
				
			}
		}
	}
	
}
</style>
